<template>
  <div style="height: calc(100% - 20px);" v-loading="loading">
    <!-- <div @click="doCloseMenu" class="my-mask-bg"
      v-if="menuOpeneds.length>0&&!focusData.showFocus&&!this.columnForm.showPop"></div> -->
    <div ref="myTopMenu" class="my-define-table-toolbar" v-if="!reqData.operation.hideToolBar">
      <el-menu :default-openeds="menuOpeneds" :default-active="activeMenuIndex" menu-trigger="click"
        class="my-tool-bar-menu" mode="horizontal" :collapse="false" text-color="#1f2329" @open="handleOpenMenu">
        <!-- <el-submenu popper-class="my-sub-menu" index="top-tableview" class="my-tableview-menu"
          v-if="reqData.operation.tableView">
          <template slot="title" style="border: solid 0.5px #f00;">
            <svg-icon icon-class="icon-table" />
            <span v-if="tableType==0||tableType==1||tableType==2">表格视图</span>
            <span v-if="tableType==6">卡片视图</span>
            <span v-if="tableType==3">画册视图</span>
          </template>
          <el-dropdown-item @click.native="doSetTableType(1)">
            <svg-icon icon-class="icon-table" />
            表格视图
          </el-dropdown-item>
          <el-dropdown-item @click.native="doSetTableType(6)">
            <svg-icon icon-class="icon-table" />
            卡片视图
          </el-dropdown-item>
          <el-dropdown-item @click.native="doSetTableType(3)">
            <svg-icon icon-class="icon-table" />
            画册视图
          </el-dropdown-item>
        </el-submenu> -->
        <el-menu-item class="mar-right-40" index="top-add" v-if="reqData.operation.add">
          <el-link :underline="false" @click="doAdd">
            <svg-icon icon-class="icon-add" />
            添加记录
          </el-link>
        </el-menu-item>
        <el-submenu popper-class="my-sub-menu" index="top-focus" v-if="reqData.operation.focus">
          <template slot="title">
            <svg-icon icon-class="newguanzhu" style="width: 20px; height: 20px; position: relative; top:4px" />
            关注
          </template>
          <el-dropdown-item v-if="!focusData.showFocus" class="focus-item" v-for="(item, index) in focusList"
            :key="index">
            <el-row>
              <el-col :span="16" @click.native="doClickFocus(item)">
                <i class="saas-iconfont saas-icon-a-yuanshuju-hanggaodanhang"></i>
                {{item.label}}
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <i @click="doEditFocus(item)" class="saas-iconfont saas-icon-xiugai"></i>
                <i v-if="item.canEdit" @click="doRemoveFocus(item,index)" class="saas-iconfont saas-icon-shanchu"></i>
              </el-col>
            </el-row>
          </el-dropdown-item>
          <div v-if="!focusData.showFocus" class="add-search-btn" @click="doAddFocus()">
            <el-link class="define-plus-icon" icon="el-icon-plus">
              添加关注
            </el-link>
          </div>
          <div ref="focusAddForm" v-if="focusData.showFocus" style="padding: 10px;">
            <div v-if="!focusData.editFocusLabel">
              <span>
                {{focusData.focusForm.label}}
                <i @click="focusData.editFocusLabel=true" class="saas-iconfont saas-icon-bianji"></i>
              </span>
            </div>
            <span class="my-define-focus-title" v-if="focusData.editFocusLabel">
              <el-input style="width: 250px;" size="mini" v-model="focusData.focusForm.label" placeholder="请输入">
              </el-input>
            </span>
            <div @click="focusData.editFocusLabel=false" class="my-mask-bg" v-if="focusData.editFocusLabel==true">
            </div>
            <el-form style="margin-top: 30px;" ref="myFocusForm" :model="focusData.focusForm" label-position="top">
              <el-row>
                <el-col :span="24">
                  <el-form-item v-for="(item, index) in focusData.focusForm.conditions" :key="index">
                    <span style="width: 60px; display: inline-block; text-align: center;" v-if="index==0">当</span>
                    <span v-else>
                      <el-select style="width: 60px;" size="mini" :popper-append-to-body="false" v-model="item.connect"
                        placeholder="请选择">
                        <el-option label="且" :value="1">
                        </el-option>
                        <el-option label="或" :value="2">
                        </el-option>
                      </el-select>
                    </span>
                    <el-select size="mini" @change="(val)=>handleChangeFocusColumn(val,item)"
                      :popper-append-to-body="false" v-model="item.columnFinalId" style="width: 150px;"
                      placeholder="请选择">
                      <el-option v-if="item2.visibile" v-for="item2 in columnFinalData" :key="item2.id"
                        :label="item2.label" :value="item2.id">
                      </el-option>
                    </el-select>
                    <el-select size="mini" :popper-append-to-body="false" v-model="item.condition" style="width: 100px;"
                      placeholder="请选择">
                      <el-option v-for="(item2,index2) in item.conditionData" :key="index2" :label="item2.label"
                        :value="item2.id">
                      </el-option>
                    </el-select>
                    <el-input size="mini" v-if="item.condition!='weikong'&&item.condition!='buweikong'"
                      v-model="item.keyword" mini style="width: 150px;" placeholder="请输入内容"></el-input>
                    <i v-if="index>0" @click="doRemoveFocusCondition(item,index)" class="el-icon-delete"
                      style="margin-left: 10px;"></i>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item>
                    <div class="add-search-btn" @click="doAddFocusCondition()">
                      <el-link icon="el-icon-plus">
                        添加条件
                      </el-link>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-submenu>

        <el-menu-item index="top-add-code" v-if="reqData.operation.addCode">
          <el-link :underline="false" @click="doAddCode">
            <svg-icon icon-class="icon-add" />
            生成代码
          </el-link>
        </el-menu-item>
        <el-menu-item index="top-add-column" v-if="reqData.operation.addColumn">
          <el-link :underline="false" @click="doGenerateColumn">
            <svg-icon icon-class="icon-add" />
            生成表格
          </el-link>
        </el-menu-item>
        <el-menu-item index="top-edit" v-if="reqData.operation.edit">
          <el-link :underline="false" @click="doEdit(0)">
            <svg-icon icon-class="icon-edit" />
            编辑
          </el-link>
        </el-menu-item>
        <!-- <el-menu-item index="top-remove" v-if="reqData.operation.delete">
          <el-link @click="doRemove">
            <svg-icon icon-class="icon-close" />
            删除
          </el-link>
        </el-menu-item> -->
        <el-submenu popper-class="my-sub-menu" index="top-share" v-if="reqData.operation.share">
          <template slot="title">
            <svg-icon icon-class="icon-share" />
            分享
          </template>
          <div class="my-toolbar-title">分享填单</div>
          <div class="my-toolbar-desc">允许外部人员通过链接或二维码填报数据</div>
        </el-submenu>
        <el-menu-item index="top-print" v-if="reqData.operation.print">
          <el-link :underline="false" @click="doPrint()">
            <svg-icon icon-class="icon-print" />
            打印
          </el-link>
        </el-menu-item>
        <!-- <el-menu-item index="top-clock" v-if="reqData.operation.clock">
          <el-link>
            <i class="saas-iconfont saas-icon-clock"></i>
            提醒
          </el-link>
        </el-menu-item> -->
        <el-submenu popper-class="my-sub-menu" index="top-query" v-if="reqData.operation.query">
          <template slot="title">
            <svg-icon icon-class="icon-query" />
            筛选
          </template>
          <div class="my-toolbar-title">设置筛选</div>
          <el-dropdown-item v-for="(item, index) in queryData" :key="index">
            当
            <el-select size="mini" @change="(val)=>handleChangeQueryColumn(val,item)" :popper-append-to-body="false"
              v-model="item.id" style="width: 100px;" placeholder="请选择">
              <el-option v-if="item2.visibile" v-for="item2 in columnFinalQueryData" :key="item2.id"
                :label="item2.label" :value="item2.id">
                <svg-icon icon-class="menu-common" />
                <span>{{ item2.label }}</span>
              </el-option>
            </el-select>
            <el-select size="mini" @change="(val)=>handleChangeQueryCondition(val,item)" :popper-append-to-body="false"
              v-model="item.condition" style="width: 100px;" placeholder="请选择">
              <el-option v-for="(item2,index2) in item.conditionData" :key="index2" :label="item2.label"
                :value="item2.id">
              </el-option>
            </el-select>
            <el-input size="mini" @change="(val)=>handleChangeQueryKeyword(val,item)"
              v-if="item.condition!='weikong'&&item.condition!='buweikong'" v-model="item.keyword" mini
              style="width: 100px;" placeholder="请输入内容"></el-input>
            <i @click="doRemoveQuery(index)" class="el-icon-delete" style="margin-left: 10px;"></i>
          </el-dropdown-item>
          <div class="add-search-btn" @click="doAddQuery()">
            <el-link class="define-plus-icon" icon="el-icon-plus">
              添加筛选条件
            </el-link>
          </div>
        </el-submenu>
        <el-submenu popper-class="my-sub-menu" index="top-group" v-if="reqData.operation.group">
          <template slot="title">
            <svg-icon icon-class="icon-group" />
            分组
          </template>
          <div class="my-toolbar-title">设置分组</div>
          <el-dropdown-item style="width: 350px;" v-for="(item, index) in groupData" :key="index">
            <el-select size="mini" @change="(val)=>handleChangeGroupColumn(val,item)" :popper-append-to-body="false"
              v-model="item.id" style="width: 100px;" placeholder="请选择">
              <el-option v-if="item2.visibile" v-for="item2 in columnFinalQueryData" :key="item2.id"
                :label="item2.label" :value="item2.id">
                <svg-icon icon-class="menu-common" />
                <span>{{ item2.label }}</span>
              </el-option>
            </el-select>
            <label v-if="item.id" @click="handleClickGroupCondition(item2,item)" style="margin: 0 5px;"
              v-for="item2 in item.conditionData">
              <el-button size="mini" v-if="item2.id===item.condition" type="primary">{{item2.start}} 到
                {{item2.end}}
              </el-button>
              <el-button size="mini" v-else plain>{{item2.start}} 到 {{item2.end}}</el-button>
            </label>
            <i v-if="item.id" @click="doRemoveGroup(index)" class="el-icon-delete" style="margin-left: 10px;"></i>
          </el-dropdown-item>
        </el-submenu>
        <el-submenu popper-class="my-sub-menu" index="top-search" v-if="reqData.operation.search">
          <template slot="title">
            <svg-icon icon-class="icon-search" />
            搜索
          </template>
          <!-- <div class="my-toolbar-title">搜索条件</div> -->
          <el-dropdown-item style="width: 260px;padding: 5px 10px 5px 10px;">
            <el-input prefix-icon="el-icon-search" @change="handleChangeSearch" size="mini"
              v-model="reqData.queryParams.queryText" placeholder="请输入关键字">
            </el-input>
          </el-dropdown-item>
        </el-submenu>
        <el-menu-item index="top-add-column" v-if="reqData.operation.liucheng">
          <el-link :underline="false" @click="doEditFlow">
            <i class="saas-iconfont saas-icon-kaihuliucheng"></i>
            流程
          </el-link>
        </el-menu-item>
        <el-submenu popper-class="my-sub-menu" index="top-more" class="my-more-menu" v-if="reqData.operation.more">
          <template slot="title">
            <i class="saas-iconfont saas-icon-gengduo1"></i>
          </template>
          <el-submenu popper-class="my-sub-menu-2" index="sub-more-line-height" v-if="reqData.operation.lineHeight">
            <template slot="title">
              <el-link>
                <svg-icon icon-class="icon-lineheight" />
                行高
              </el-link>
            </template>
            <div style="max-height: 400px;overflow-y: auto;" class="my-define-dropdown-menu0">
              <el-dropdown-item v-for="(item, index) in heightData" :key="index">
                <el-row>
                  <el-col :span="22" @click.native="handleHeightCommand(item)">
                    <i class="saas-iconfont saas-icon-a-yuanshuju-hanggaodanhang"></i>
                    {{item.label}}
                  </el-col>
                </el-row>
              </el-dropdown-item>
            </div>
          </el-submenu>
          <el-submenu popper-class="my-sub-menu" index="sub-more-sort-order" v-if="reqData.operation.sort">
            <template slot="title">
              <el-link>
                <svg-icon icon-class="icon-sort" />
                排序
              </el-link>
            </template>
            <el-dropdown-item style="width: 350px;" v-for="(item, index) in sortData" :key="index">
              <el-select size="mini" @change="(val)=>handleChangeSortColumn(val,item)" :popper-append-to-body="false"
                v-model="item.id" style="width: 100px;" placeholder="请选择">
                <el-option v-if="item2.visibile" v-for="item2 in columnFinalSortData" :key="item2.id"
                  :label="item2.label" :value="item2.id">
                  <svg-icon icon-class="menu-common" />
                  <span>{{ item2.label }}</span>
                </el-option>
              </el-select>
              <label v-if="item.id" @click="handleClickSortCondition(item2,item)" style="margin: 0 5px;"
                v-for="item2 in item.conditionData">
                <el-button size="mini" v-if="item2.id===item.condition" type="primary">{{item2.start}} 到
                  {{item2.end}}
                </el-button>
                <el-button size="mini" v-else type="primary" plain>{{item2.start}} 到 {{item2.end}}</el-button>
              </label>
              <i v-if="item.id" @click="doRemoveSort(index)" class="el-icon-delete" style="margin-left: 10px;"></i>
            </el-dropdown-item>
          </el-submenu>
          <el-menu-item index="sub-import" v-if="reqData.operation.import">
            <el-link @click="doImport()">
              <svg-icon icon-class="icon-import" />
              导入
            </el-link>
          </el-menu-item>
          <el-menu-item index="sub-export" v-if="reqData.operation.export">
            <el-link @click="doExport()">
              <svg-icon icon-class="icon-export" />
              导出
            </el-link>
          </el-menu-item>
          <el-menu-item index="sub-export-qrcode" v-if="reqData.operation.exportQrcode">
            <el-link @click="doExportQrcode()">
              <svg-icon icon-class="icon-export" />
              导出二维码
            </el-link>
          </el-menu-item>
          <el-submenu popper-class="my-sub-menu-zd" index="sub-more-column-define"
            v-if="reqData.operation.defineColumn">
            <template slot="title">
              <el-link>
                <svg-icon icon-class="icon-hide" />
                字段定义
              </el-link>
            </template>
            <div style="font-size: 15px;color: #1f2329;padding: 10px; border-bottom: solid 1px #dee0e3;">
              字段定义
            </div>
            <div class="my-define-dropdown-menu0" style="width: 240px;">
              <div v-if="!columnForm.showPop" style="border-bottom: solid 0.5px #dee0e3;">
                <el-dropdown-item v-if="item.isFixed" v-for="(item, index) in columnFinalData" :key="index"
                  style="margin: 5px;">
                  <el-row>
                    <el-col :span="19">
                      <svg-icon icon-class="icon-lock" />
                      {{item.label}}
                    </el-col>
                    <el-col :span="5" style="text-align: right;">
                      <el-dropdown trigger="click" :hide-on-click="false">
                        <span class="el-dropdown-link">
                          <!-- <svg-icon icon-class="icon-line-more" /> -->
                          <i class="saas-iconfont saas-icon-gengduo1" style="margin-right: 0px;"></i>
                        </span>
                        <el-dropdown-menu class="column-dropdown-menu" slot="dropdown">
                          <el-dropdown-item class="column-dropdown-item-edit" @click.native="doEditColumn(item)">
                            <svg-icon icon-class="icon-edit" />
                            编辑
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-dropdown-item>
              </div>
            </div>
            <div v-if="!columnForm.showPop"
              style="max-height: 320px;overflow-y: auto;width: 240px;margin-bottom: 30px;border-bottom: solid 0.5px #dee0e3; padding: 5px 0px;"
              class="my-define-dropdown-menu0">
              <draggable v-model="columnFinalData" @change="handleDragChange">
                <el-dropdown-item v-if="!item.isFixed" v-for="(item, index) in columnFinalData" :key="index">
                  <el-row>
                    <el-col :span="19">
                      <svg-icon icon-class="menu-common-2" />
                      {{item.label}}
                    </el-col>
                    <el-col :span="5"
                      style="text-align: right; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;">
                      <span @click="triggerVisibility(item,index)">
                        <svg-icon v-if="item.visibile" icon-class="menu-eye-open" />
                        <svg-icon v-else icon-class="menu-eye-close" />
                      </span>
                      <el-dropdown trigger="click" :hide-on-click="false">
                        <span class="el-dropdown-link">
                          <!-- <svg-icon icon-class="icon-line-more" /> -->
                          <i class="saas-iconfont saas-icon-gengduo1" style="margin-right: 0px;"></i>
                        </span>
                        <el-dropdown-menu class="column-dropdown-menu" slot="dropdown">
                          <el-dropdown-item class="column-dropdown-item-edit" @click.native="doEditColumn(item)">
                            <svg-icon icon-class="icon-edit" />
                            编辑
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <el-popconfirm confirm-button-text='删除' cancel-button-text='我在想想' title="确认删除？"
                              @confirm="doRemoveColumn(item)">
                              <div class="column-dropdown-remove-div" slot="reference">
                                <svg-icon style="width: 15px;height: 15px;" icon-class="icon-remove" />
                                删除
                              </div>
                            </el-popconfirm>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-dropdown-item>
              </draggable>
            </div>
            <div v-if="columnForm.showPop"
              style="max-height: 320px;overflow-y: auto;width: 240px;margin-bottom: 0px;  padding: 5px 0px;"
              class="my-define-dropdown-menu0">
              <div ref="columnFormRef" style="padding: 10px;">
                <el-form size="mini" ref="myColumnForm" :model="columnForm.form" label-position="top">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="标题">
                        <el-input :disabled="!columnForm.form.canEditLabel" v-model="columnForm.form.label"
                          placeholder="请输入" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="字段类型">
                        <el-select :disabled="!columnForm.form.canEditType" style="width: 100%;"
                          v-model="columnForm.form.formFieldType" placeholder="请选择">
                          <el-option v-for="item in formFieldTypeData" :key="item.value" :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="columnForm.form.canEditType&&columnForm.form.formFieldType==12">
                      <el-form-item label="选择关联表">
                        <el-cascader :options="sceneList" :props="{ value: 'id',emitPath: false }"
                          v-model="columnForm.form.relateSceneId" :show-all-levels="true"></el-cascader>
                      </el-form-item>
                    </el-col>
                    <el-col v-if="columnForm.form.canEditType&&columnForm.form.formFieldType==10">
                      <el-input size="mini" v-model="columnForm.form.formDataField" style="width: 100%;"
                        placeholder="请输入">
                      </el-input>
                    </el-col>
                    <el-col
                      v-if="columnForm.form.canEditType&&(columnForm.form.formFieldType==3||columnForm.form.formFieldType==4||columnForm.form.formFieldType==5)"
                      :span="24" style="padding-bottom: 10px;">
                      <el-link style="font-size: 14px;padding-bottom: 10px;" @click.native="doAddFormCondition()">
                        <svg-icon icon-class="icon-add" />
                        添加一个选项
                      </el-link>
                      <el-form-item v-for="(item, index) in columnForm.form.fieldData" :key="index">
                        <el-color-picker class="my-color-picker" v-model="item.bgColor" size="mini"></el-color-picker>
                        <el-input size="mini" v-model="item.value" mini style="width: calc(100% - 50px);"
                          placeholder="请输入">
                        </el-input>
                        <i @click="doRemoveFormCondition(index)" class="el-icon-delete"
                          style="margin: 0 0 0 0px;vertical-align: -2px;"></i>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="checkbox-style">
                      <el-form-item label="">
                        <el-checkbox v-model="columnForm.form.fieldRequired">这是一个必填项</el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="checkbox-style">
                      <el-form-item label="">
                        <el-checkbox v-model="columnShow.checked">字段描述</el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="columnShow.checked">
                      <el-form-item>
                        <el-input type="textarea" :rows="2" :disabled="!columnForm.form.canEditLabel"
                          v-model="columnForm.form.fieldRemark" placeholder="请添加字段描述" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
            <div style="position: absolute;bottom: 0;margin: 5px 0 5px 10px;" v-if="!columnForm.showPop"
              class="add-search-btn" @click="doAddColumn()">
              <el-link class="define-plus-icon" icon="el-icon-plus"
                style="color: #1f2329; font-size: 14px; margin-right: 0px;">
                添加字段
              </el-link>
            </div>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </div>
    <div style="margin-top: 41px;height: calc(100% - 50px)">
      <table-basic v-if="tableType==1" :reqData="reqData" :columnFinalData="columnFinalVisibleData"
        :sceneType="sceneType" :sceneId="sceneId" :defineSceneId="defineSceneId" :tableHeight="getTableHeight()"
        :rowStyle="rowStyle">
      </table-basic>
      <table-group v-if="tableType==2" :reqData="reqData" :columnGroupData="columnGroupData" :sceneType="sceneType"
        :sceneId="sceneId" :defineSceneId="defineSceneId" :tableHeight="getTableHeight()" :rowStyle="rowStyle">
      </table-group>
      <table-board v-if="tableType==3||tableType==6" :reqData="reqData" :columnFinalData="columnFinalData"
        :sceneType="sceneType" :sceneId="sceneId" :defineSceneId="defineSceneId" :tableHeight="getTableHeight()"
        :showCardImage="showCardImage">
      </table-board>
      <table-tree v-if="tableType==4" :reqData="reqData" :columnGroupData="columnFinalData" :sceneType="sceneType"
        :sceneId="sceneId" :tableHeight="getTableHeight()" :rowStyle="rowStyle">
      </table-tree>
      <table-calendar v-if="tableType==5" :reqData="reqData" :columnFinalData="columnFinalData" :sceneType="sceneType"
        :sceneId="sceneId" :defineSceneId="defineSceneId">
      </table-calendar>
    </div>
    <!-- <pagination v-show="reqData.total > reqData.queryParams.pageSize" :total="reqData.total"
      :page.sync="reqData.queryParams.pageIndex" :limit.sync="reqData.queryParams.pageSize" @pagination="getData" />-->
    <el-dialog custom-class="my-common-dialog" :width="dialogWidth" :visible.sync="reqForm.dialogShow"
      :show-close="false" :close-on-click-modal="false">
      <div ref="refCommFormDiv">
        <div ref="refCommForm" :reqForm="reqForm" :is="reqForm.currentView" :sceneType="sceneType" :sceneId="sceneId"
          :defineSceneId="defineSceneId" v-if="reqForm.dialogShow" :loading="reqForm.loading" keep-alive></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    getColumns,
    saveColumnSort,
    saveFocusData,
    removeFocusData,
    removeFocusCondition,
    saveDefineColumn,
    resetDefineColumn,
    removeDefineColumn
  } from '@/api/system/column'
  import {
    getScenes
  } from '@/api/system/scene'
  import draggable from "vuedraggable"
  import tableBasic from "@/views/master/TableBasic";
  import tableGroup from "@/views/master/TableGroup";
  import tableBoard from "@/views/master/TableBoard";
  import tableTree from "@/views/master/TableTree";
  import tableCalendar from "@/views/master/TableCalendar";
  import masterForm from "@/views/master/Form"
  import masterImport from "@/views/master/Import"
  import printChoose from "@/views/master/PrintChoose"
  import flowIndex from "@/views/flow/index"
  export default {
    name: 'table-grid',
    components: {
      draggable,
      tableBasic,
      tableGroup,
      tableBoard,
      tableTree,
      tableCalendar,
      masterForm,
      masterImport,
      printChoose,
      flowIndex
    },
    props: {
      reqData: {
        type: Object,
        default: () => ({
          loading: false,
          tableData: [],
          queryParams: {},
          total: 0,
          operation: {},
          rightMenuData: []
        })
      },
      reqForm: {
        type: Object,
        default: () => ({
          dialogWidth: '30%',
          currentView: '',
          formData: {},
          dialogShow: false,
          dialogTitle: '',
          uploadFormData: {
            required: false,
            uploadFile: false,
            uploadFolder: 'Service',
            fileList: [],
            listType: 'picture-card'
          },
          loading: false,
          denyEdit: false,
          recordData: []
        })
      },
      columnData: {
        type: Array,
        default: () => ([])
      },
      sceneType: {
        type: Number,
        default: 0
      },
      sceneId: {
        type: Number,
        default: 0
      },
      defineSceneId: {
        type: Number,
        default: 0
      },
      defaultTableType: {
        type: Number,
        default: 1
      },
      defaultTableHeight: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        loading: false,
        menuOpeneds: [],
        activeMenuIndex: '',
        allColumnData: [],
        columnFinalData: [],
        columnFinalVisibleData: [],
        columnFinalQueryData: [],
        columnFinalSortData: [],
        queryData: [],
        sortData: [{
          id: null,
          condition: null
        }],
        groupData: [{
          id: null,
          condition: null
        }],
        heightData: [{
          id: 1,
          label: '默认',
          height: '33px'
        }, {
          id: 2,
          label: '中等',
          height: '55px'
        }, {
          id: 3,
          label: '高',
          height: '77px'
        }, {
          id: 4,
          label: '极高',
          height: '110px'
        }],
        selectionIds: [],
        selectionData: [],
        rowStyle: {
          height: '33px'
        },
        showRightMenu: false,
        rightClickRow: null,
        columnGroupData: [],
        // 表格高度
        tableHeight: window.innerHeight - 30,
        tableType: 0, // 1=表格 2=分组 3=看板
        focusList: [],
        focusData: {
          activeFocus: '',
          hoverFocus: '',
          focusForm: {
            id: '',
            focusId: 0,
            label: '',
            icon: '',
            canEdit: true,
            isEditing: true,
            conditions: []
          },
          showTitle: '',
          showFocus: false,
          editFocusLabel: false
        },
        formFieldTypeData: [{
          value: 1,
          label: '文本'
        }, {
          value: 2,
          label: '日期时间'
        }, {
          value: 8,
          label: '日期'
        }, {
          value: 3,
          label: '单选'
        }, {
          value: 4,
          label: '多选'
        }, {
          value: 5,
          label: '复选框'
        }, {
          value: 6,
          label: '多行文本'
        }, {
          value: 9,
          label: '数字'
        }, {
          value: 10,
          label: '智能公式'
        }, {
          value: 11,
          label: '附件'
        }, {
          value: 12,
          label: '关联表'
        }],
        columnForm: {
          showPop: false,
          label: '',
          icon: '',
          form: {}
        },
        columnShow: {
          checked: false,
        },
        showCardImage: false,
        sceneList: [],
        sceneProps: {
          value: 'id'
        },
      }
    },
    computed: {
      ...mapGetters(['routers', 'sidebar']),
      dialogWidth() {
        // alert(this.reqForm.dialogWidth);
        if (this.reqForm.dialogWidth) {
          return this.reqForm.dialogWidth
        }
        return '50%'
      },
      dialogPopShow() {
        return this.reqForm.dialogShow
      }
    },
    watch: {
      dialogPopShow: {
        handler(newValue, oldValue) {
          if (newValue) {
            setTimeout(() => {
              this.addClickEvent()
            }, 500)
          }
        }
      }
    },
    created() {
      var that = this;
      that.getColumnData()
      setTimeout(() => {
        this.getSceneList()
      }, 1000)
      if (that.defaultTableHeight) {
        that.tableHeight = that.defaultTableHeight
      }
      const queryDataStr = localStorage.getItem('query_data_' + this.sceneId)
      if (queryDataStr) {
        this.queryData = JSON.parse(queryDataStr)
      }
      const groupDataStr = localStorage.getItem('group_data_' + this.sceneId)
      if (groupDataStr) {
        this.groupData = JSON.parse(groupDataStr)
        this.groupData.forEach((item) => {
          item.condition = ''
        })
        if (this.groupData.length == 0) {
          this.addNewGroup()
        }
      }
      const sortDataStr = localStorage.getItem('sort_data_' + this.sceneId)
      if (sortDataStr) {
        this.sortData = JSON.parse(sortDataStr)
      }
      setTimeout(() => {
        this.$$parent(this, "doSearch", {
          queryData: this.getQueryPostData(),
          groupData: this.getGroupPostData(),
          sortData: this.getSortPostData()
        })
      }, 10)
    },
    methods: {
      addClickEvent() {
        document.addEventListener('mousedown', this.handleClickEvent, false)
      },
      removeClickEvent() {
        document.removeEventListener('mousedown', this.handleClickEvent, false)
      },
      handleClickEvent(e) {
        let isIn = false
        let colDropMenus = document.querySelectorAll('.el-popper')
        colDropMenus.forEach((colDropMenu) => {
          if (colDropMenu.contains(e.target)) {
            isIn = true
            return false
          }
        })
        if (this.focusData.showFocus) {
          if (!this.$refs.focusAddForm.contains(e.target)) {
            this.submitSaveFocus()
            // this.removeClickEvent()
          }
        } else if (this.columnForm.showPop) {
          if (!this.$refs.columnFormRef.contains(e.target)) {
            if (!isIn) {
              let subMenus = document.querySelectorAll('.el-color-dropdown')
              subMenus.forEach((sunMenu) => {
                if (sunMenu.contains(e.target)) {
                  isIn = true
                  return false
                }
              })
            }
            if (!isIn) {
              this.submitSaveColumn()
              // this.removeClickEvent()
            }
          }
        } else if (this.menuOpeneds.length > 0) {
          if (!this.$refs.myTopMenu.contains(e.target)) {
            if (!isIn) {
              let subMenus = document.querySelectorAll('.el-menu--horizontal.my-sub-menu')
              subMenus.forEach((sunMenu) => {
                if (sunMenu.contains(e.target)) {
                  isIn = true
                  return false
                }
              })
            }

            if (!isIn) {
              this.doCloseMenu()
              this.removeClickEvent()
            }
          }
        } else if (this.reqForm.dialogShow) {
          if (!this.$refs.refCommFormDiv.contains(e.target)) {
            if (!isIn) {
              if (!this.$refs.refCommForm.relate || !this.$refs.refCommForm.relate.showPop) {
                // this.removeClickEvent()
                this.handleFormSave()
              }
            }
          }
        }
      },
      // 获取场景列表
      getSceneList() {
        if (this.sceneType) {
          getScenes({
            sceneType: 0
          }).then(res => {
            if (res.status) {
              this.sceneList = res.outputData.sceneList.filter((item) => {
                return item.visibility
              })
            }
          })
        }
      },
      // 获取列
      getColumnData() {
        this.columnFinalVisibleData = []
        this.tableType = 0
        if (this.sceneType) {
          getColumns({
            sceneType: this.sceneType,
            sceneId: this.sceneId,
            defineSceneId: this.defineSceneId
          }).then(res => {
            if (res.status) {
              this.allColumnData = res.outputData.columnList
              this.columnFinalData = this.allColumnData.filter(function(item) {
                return !item.deleted;
              })
              this.focusList = res.outputData.focusList
              this.setColumnData()
            }
            this.tableType = this.defaultTableType
          })
        } else {
          this.columnFinalData = this.columnData
          this.setColumnData()
          this.tableType = 0
          setTimeout(() => {
            this.tableType = this.defaultTableType
          }, 10)
        }
      },
      setColumnData() {
        this.columnFinalVisibleData = this.columnFinalData.filter(function(item) {
          return item.visibile;
        })
        this.columnFinalQueryData = this.columnFinalData.filter(function(item) {
          return item.canQuery && !item.deleted;
        })
        this.columnFinalSortData = this.columnFinalData.filter(function(item) {
          return item.canSort && !item.deleted;
        })
      },
      doSaveColumnSort(reload) {
        var that = this
        saveColumnSort({
          sceneType: this.sceneType,
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          dataItems: JSON.stringify(that.columnFinalData)
        }).then(res => {
          this.setColumnData()
          if (reload) {
            setTimeout(() => {
              this.getData()
            }, 10)
          }
        })
      },
      // 列排序拖拽事件触发
      handleDragChange() {
        var that = this
        this.doSaveColumnSort(false)
        saveColumnSort({
          sceneType: this.sceneType,
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          dataItems: JSON.stringify(that.columnFinalData)
        }).then(res => {
          this.setColumnData()
          // this.getData()
        })
      },
      // 显示、隐藏列
      triggerVisibility(item) {
        var that = this
        const oriType = this.tableType
        // this.tableType = 0
        item.visibile = !item.visibile
        this.doSaveColumnSort(true)
      },
      // 获取数据
      getData() {
        this.$$parent(this, "doSearch", {})
      },
      setSelectionIds(selectionIds, selectionData) {
        this.selectionIds = selectionIds
        this.selectionData = selectionData
      },
      // 添加数据
      doAdd() {
        this.$$parent(this, "doAdd")
      },
      doAddCode() {
        this.$$parent(this, "doAddCode")
      },
      doGenerateColumn() {
        this.$$parent(this, "doGenerateColumn")
      },
      // 修改数据
      doEdit(Id) {
        if (this.focusData.showFocus || this.columnForm.showPop || this.menuOpeneds.length > 0 || this.reqForm
          .dialogShow) {
          return
        }
        if (!Id) {
          if (this.selectionIds.length === 0) {
            return
          }
          Id = this.selectionIds[0];
        }
        this.$$parent(this, "doEdit", Id)
      },
      // 删除数据
      doRemove() {
        if (this.selectionIds.length === 0) {
          return
        }
        this.$$parent(this, "doRemove", this.selectionIds)
      },
      // 添加筛选条件
      doAddQuery() {
        var that = this;
        that.queryData.push({
          id: null,
          columnId: null,
          defineId: null,
          condition: null,
          keyword: '',
          conditionData: []
        })
      },
      // 删除筛选条件
      doRemoveQuery(index) {
        this.queryData.splice(index, 1)
        this.handleStartQuery(true)
      },
      // 筛选条件选择列事件触发
      handleChangeQueryColumn(val, item) {
        var columnItem = null;
        this.columnFinalData.forEach(function(myItem) {
          if (myItem.id == val) {
            columnItem = myItem;
            return false
          }
        })
        item.columnId = columnItem.columnId
        item.defineId = columnItem.defineId
        item.conditionData = [];
        // 字符串
        if (columnItem.fieldType == '1') {
          item.conditionData.push({
            id: 'dengyu',
            label: '等于'
          })
          item.conditionData.push({
            id: 'budengyu',
            label: '不等于'
          })
          item.conditionData.push({
            id: 'baohan',
            label: '包含'
          })
          item.conditionData.push({
            id: 'bubaohan',
            label: '不包含'
          })
        } else {
          item.conditionData.push({
            id: 'dengyu',
            label: '='
          })
          item.conditionData.push({
            id: 'budengyu',
            label: '≠'
          })
          item.conditionData.push({
            id: 'dayu',
            label: '>'
          })
          item.conditionData.push({
            id: 'dayudengyu',
            label: '≥'
          })
          item.conditionData.push({
            id: 'xiaoyu',
            label: '<'
          })
          item.conditionData.push({
            id: 'xiaoyudengyu',
            label: '≤'
          })
        }
        item.conditionData.push({
          id: 'weikong',
          label: '为空'
        })
        item.conditionData.push({
          id: 'buweikong',
          label: '不为空'
        })
        this.handleStartQuery(false)
      },
      // 筛选条件选择列事件触发
      handleChangeQueryCondition(val, item) {
        this.handleStartQuery(false)
      },
      // 筛选条件选择列事件触发
      handleChangeQueryKeyword(val, item) {
        this.handleStartQuery(false)
      },
      // 执行查询
      handleStartQuery(forceLoad) {
        var postData = this.getQueryPostData()
        localStorage.setItem('query_data_' + this.sceneId, JSON.stringify(this.queryData))
        if (postData.length > 0 || forceLoad) {
          this.$$parent(this, "doSearch", {
            queryData: postData
          })
        }
      },
      getQueryPostData() {
        var postData = [];
        this.queryData.forEach(function(item) {
          if (item.condition != 'weikong' && item.condition != 'buweikong') {
            if (item.id && item.condition && item.keyword) {
              postData.push({
                id: item.id,
                columnId: item.columnId,
                defineId: item.defineId,
                condition: item.condition,
                keyword: item.keyword
              })
            }
          } else {
            if (item.id && item.condition) {
              postData.push({
                id: item.id,
                columnId: item.columnId,
                defineId: item.defineId,
                condition: item.condition,
                keyword: ''
              })
            }
          }
        })
        return postData
      },
      // 排序条件选择列事件触发
      handleChangeSortColumn(val, item) {
        var columnItem = null;
        this.columnFinalData.forEach(function(myItem) {
          if (myItem.id == val) {
            columnItem = myItem;
            return false
          }
        })
        item.columnId = columnItem.columnId
        item.defineId = columnItem.defineId
        item.conditionData = [];
        if (columnItem.fieldType != 'number') {
          item.conditionData.push({
            id: 'asc',
            start: 'A',
            end: 'Z'
          })
          item.conditionData.push({
            id: 'desc',
            start: 'Z',
            end: 'A'
          })
        } else {
          item.conditionData.push({
            id: 'asc',
            start: '1',
            end: '9'
          })
          item.conditionData.push({
            id: 'desc',
            start: '9',
            end: '1'
          })
        }
        this.addNewSort()
        this.handleStartSort(false)
      },
      addNewSort() {
        var sortItem = this.sortData.filter(function(mySort) {
          return mySort.id === null;
        })
        if (sortItem.length == 0) {
          this.sortData.push({
            id: null,
            columnId: null,
            defineId: null,
            condition: null,
            conditionData: []
          })
        }
      },
      // 执行排序查询
      handleStartSort(forceLoad) {
        localStorage.setItem('sort_data_' + this.sceneId, JSON.stringify(this.sortData))
        var postData = this.getSortPostData()
        if (postData.length > 0 || forceLoad) {
          this.$$parent(this, "doSearch", {
            sortData: postData
          })
        }
      },
      getSortPostData() {
        var postData = [];
        this.sortData.forEach(function(item) {
          if (item.id && item.condition) {
            postData.push({
              id: item.id,
              columnId: item.columnId,
              defineId: item.defineId,
              condition: item.condition,
            })
          }
        })
        return postData
      },
      // 点击排序触发
      handleClickSortCondition(item2, item) {
        item.condition = item2.id
        this.handleStartSort(false);
      },
      // 删除排序条件
      doRemoveSort(index) {
        this.sortData.splice(index, 1)
        this.handleStartSort(true)
      },
      // 行高触发事件
      handleHeightCommand(command) {
        this.rowStyle.height = command.height;
      },
      // 触发搜索
      handleChangeSearch(val) {
        this.$$parent(this, "doSearch", {
          queryText: val
        })
      },
      // 打开操作栏事件
      handleOpenMenu(key, keyPath) {
        this.menuOpeneds = []
        if (key.indexOf('top') > -1) {
          this.menuOpeneds.push(key)
        } else if (key.indexOf('sub-more') > -1) {
          this.menuOpeneds.push('top-more')
          this.menuOpeneds.push(key)
        }
        this.addClickEvent()
      },
      // 关闭操作栏方法
      doCloseMenu() {
        this.menuOpeneds = []
      },
      // 分组条件选择列事件触发
      handleChangeGroupColumn(val, item) {
        var columnItem = null;
        this.columnFinalData.forEach(function(myItem) {
          if (myItem.id == val) {
            columnItem = myItem;
            return false
          }
        })
        item.columnId = columnItem.columnId
        item.defineId = columnItem.defineId
        item.conditionData = [];
        if (columnItem.fieldType != 'number') {
          item.conditionData.push({
            id: 'asc',
            start: 'A',
            end: 'Z'
          })
          item.conditionData.push({
            id: 'desc',
            start: 'Z',
            end: 'A'
          })
        } else {
          item.conditionData.push({
            id: 'asc',
            start: '1',
            end: '9'
          })
          item.conditionData.push({
            id: 'desc',
            start: '9',
            end: '1'
          })
        }
        this.addNewGroup()
        this.handleStartGroup(false)
      },
      addNewGroup() {
        var groupItem = this.groupData.filter(function(myGroup) {
          return myGroup.id === null;
        })
        if (groupItem.length == 0) {
          this.groupData.push({
            id: null,
            columnId: 0,
            defineId: 0,
            condition: null,
            conditionData: []
          })
        }
      },
      // 执行分组查询
      handleStartGroup(forceLoad) {
        var that = this
        localStorage.setItem('group_data_' + this.sceneId, JSON.stringify(this.groupData))
        var postData = this.getGroupPostData()
        if (postData.length > 0 || forceLoad) {
          this.$$parent(this, "doSearch", {
            groupData: postData
          })
        }
      },
      getGroupPostData() {
        var that = this
        var postData = [];
        this.columnGroupData = [];
        this.groupData.forEach(function(item) {
          if (item.id && item.condition) {
            postData.push({
              id: item.id,
              columnId: item.columnId,
              defineId: item.defineId,
              condition: item.condition,
            })
            var myColumns = that.columnFinalData.filter(function(myColumn) {
              return myColumn.id == item.id
            })
            if (myColumns.length > 0) {
              that.columnGroupData.push(myColumns[0])
            }
          }
        })
        if (that.columnGroupData.length > 0) {
          this.tableType = 2
          that.columnFinalData.forEach(function(columnFinalItem) {
            var myGroups = that.groupData.filter(function(myGroup) {
              return myGroup.id == columnFinalItem.id
            })
            if (myGroups.length == 0) {
              that.columnGroupData.push(columnFinalItem)
            }
          })
        }
        return postData
      },
      // 点击分组条件触发
      handleClickGroupCondition(item2, item) {
        if (item.condition == item2.id) {
          item.condition = null
          this.handleStartGroup(true)
        } else {
          item.condition = item2.id
          this.handleStartGroup(false)
        }
      },
      // 删除分组条件
      doRemoveGroup(index) {
        this.groupData.splice(index, 1)
        this.handleStartGroup(true)
      },
      doSetTableType(type) {
        this.tableType = type
        this.showCardImage = this.tableType == 3
        this.doCloseMenu()
      },
      // 导入数据
      doImport() {
        this.doCloseMenu()
        this.$$parent(this, "doImport")
      },
      // 导出数据
      doExport() {
        this.$$parent(this, "doExport", this.selectionIds)
      },
      doExportQrcode() {
        if (this.selectionIds.length == 0) {
          this.$message.warning('请选择数据')
          return
        }
        this.$$parent(this, "doExportQrcode", this.selectionIds)
      },
      //点击关注
      doClickFocus(item) {
        this.$$parent(this, "doSearch", {
          focusId: item.focusId
        })
      },
      //添加关注
      doAddFocus() {
        // this.addClickEvent()
        var that = this
        var index = that.focusList.length + 1
        that.focusData.focusForm = {
          id: 'temp_focus_' + index,
          focusId: 0,
          label: '新关注',
          icon: '',
          canEdit: true,
          isEditing: true,
          conditions: []
        }
        that.focusData.showTitle = '新增关注'
        that.focusData.showFocus = true
        that.doAddFocusCondition()
      },
      submitSaveFocus() {
        var postForm = this.focusData.focusForm
        var postCondition = []
        postForm.conditions.forEach(function(item) {
          var keyword = ''
          if (item.condition != 'weikong' && item.condition != 'buweikong') {
            if (item.keyword) {
              keyword = item.keyword
            } else {
              return true
            }
          }
          if ((item.columnId || item.defineId) && item.condition) {
            postCondition.push({
              id: item.id,
              columnId: item.columnId,
              defineId: item.defineId,
              condition: item.condition,
              keyword: keyword,
              connect: item.connect
            })
          }
        })
        if (postCondition.length == 0) {
          // this.$message({
          //   message: '条件不能为空',
          //   type: 'warning'
          // })
          this.focusData.showFocus = false
          return
        }
        saveFocusData({
          Id: postForm.focusId,
          sceneType: this.sceneType,
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          focusName: postForm.label,
          condition: JSON.stringify(postCondition),
        }).then(res => {
          if (res.status) {
            this.$message({
              message: postForm.focusId > 0 ? '修改成功' : '新增成功',
              type: 'success'
            })
            postForm.isEditing = false
            if (postForm.focusId <= 0) {
              postForm.focusId = res.outputData
            }
            this.getColumnData()
            this.$$parent(this, "doSearch", {
              focusId: postForm.focusId
            })
            this.focusData.showFocus = false
          }
        })
      },
      doEditFocus(item) {
        // this.addClickEvent()
        // this.doCloseMenu()
        var that = this
        that.focusData.focusForm = item
        that.focusData.showTitle = '编辑关注'
        that.focusData.showFocus = true
        that.focusData.focusForm.conditions.forEach((item) => {
          that.handleChangeFocusColumn(item.columnFinalId, item)
        })
      },
      doRemoveFocus(item, index) {
        if (!item.focusId) {
          this.focusList.splice(index, 1)
          return
        }
        removeFocusData({
          Id: item.focusId,
        }).then(res => {
          if (res.status) {
            this.getColumnData()
            this.$$parent(this, "doSearch", {
              focusId: 0
            })
          }
        })
      },
      handleFocusMouseOver(event, item) {
        var that = this;
        setTimeout(() => {
          that.focusData.hoverFocus = item.id
        }, 100)
      },
      handleFocusMouseOut(event, item) {
        var that = this;
        if (event.toElement.className.indexOf('my-cateogry-item1-oper') > -1 || event.toElement.className.indexOf(
            'saas-iconfont') > -1) {
          return
        }
        setTimeout(() => {
          this.focusData.hoverFocus = ''
        }, 100)
      },
      //筛选条件选择列事件触发
      handleChangeFocusColumn(val, item) {
        var columnItem = null;
        this.columnFinalData.forEach(function(myItem) {
          if (myItem.id == val) {
            columnItem = myItem;
            return false
          }
        })
        item.columnId = columnItem.columnId
        item.defineId = columnItem.defineId
        item.conditionData = [];
        if (columnItem.fieldType == 1) {
          item.conditionData.push({
            id: 'dengyu',
            label: '等于'
          })
          item.conditionData.push({
            id: 'budengyu',
            label: '不等于'
          })
          item.conditionData.push({
            id: 'baohan',
            label: '包含'
          })
          item.conditionData.push({
            id: 'bubaohan',
            label: '不包含'
          })
        } else {
          item.conditionData.push({
            id: 'dengyu',
            label: '='
          })
          item.conditionData.push({
            id: 'budengyu',
            label: '≠'
          })
          item.conditionData.push({
            id: 'dayu',
            label: '>'
          })
          item.conditionData.push({
            id: 'dayudengyu',
            label: '≥'
          })
          item.conditionData.push({
            id: 'xiaoyu',
            label: '<'
          })
          item.conditionData.push({
            id: 'xiaoyudengyu',
            label: '≤'
          })
        }
        item.conditionData.push({
          id: 'weikong',
          label: '为空'
        })
        item.conditionData.push({
          id: 'buweikong',
          label: '不为空'
        })
      },
      //删除关注筛选条件
      doRemoveFocusCondition(item, index) {
        if (!item.id) {
          this.focusData.focusForm.conditions.splice(index, 1)
          return
        }
        removeFocusCondition({
          Id: item.id,
        }).then(res => {
          if (res.status) {
            this.focusData.focusForm.conditions.splice(index, 1)
          }
          this.getColumnData()
        })
      },
      //添加关注筛选条件
      doAddFocusCondition() {
        var that = this;
        var connect = that.focusData.focusForm.conditions.length == 0 ? 0 : 1;
        that.focusData.focusForm.conditions.push({
          id: 0,
          columnFinalId: null,
          columnId: 0,
          defineId: 0,
          condition: null,
          keyword: '',
          connect: connect,
          conditionData: []
        })
      },
      //字段修改
      doEditColumn(item) {
        this.handleDragChange()
        setTimeout(() => {
          this.columnForm.showPop = true
        }, 200)
        // this.addClickEvent()
        this.columnForm.label = '编辑'
        this.columnForm.form = item
      },
      //字段删除
      doRemoveColumn(item) {
        this.loading = true
        removeDefineColumn({
          columnId: item.columnId,
          defineId: item.defineId,
          defineSceneId: this.defineSceneId
        }).then(res => {
          this.loading = false
          if (res.status) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getColumnData()
            this.columnForm.showPop = false
          }
        })
      },
      //字段新增
      doAddColumn() {
        this.handleDragChange()
        // this.addClickEvent()
        this.columnForm.showPop = true
        this.columnForm.label = '新增'
        this.columnForm.form = {
          canEditLabel: true,
          canEditType: true,
          canQuery: true,
          canSort: true,
          deleted: false,
          fieldType: 1,
          formDataField: "",
          formDataFieldType: 0,
          formFieldType: 1,
          id: 0,
          defineId: 0,
          isFixed: false,
          label: "自定义字段" + (this.columnFinalData.length + 1),
          name: "",
          sortIndex: 1,
          visibile: true,
          fieldData: [],
          fieldRequired: false,
          relateSceneIds: []
        }
      },
      //添加一个选项
      doAddFormCondition() {
        this.columnForm.form.fieldData.push({
          value: '',
          label: '',
          bgColor: ''
        })
      },
      //删除选项
      doRemoveFormCondition(index) {
        this.columnForm.form.fieldData.splice(index, 1)
      },
      //保存字段
      submitSaveColumn() {
        if (this.columnForm.form.formFieldType != 10) {
          this.columnForm.form.formDataField = ''
        }
        if (this.columnForm.form.formFieldType == 3 || this.columnForm.form.formFieldType == 4 || this.columnForm.form
          .formFieldType == 5) {
          if (this.columnForm.form.fieldData.length > 0) {
            this.columnForm.form.fieldData.forEach((item) => {
              item.label = item.value
            })
            this.columnForm.form.formDataField = JSON.stringify(this.columnForm.form.fieldData)
          }
        }
        if (this.columnForm.form.formFieldType == 12) {
          if (!this.columnForm.form.relateSceneId) {
            this.$message({
              message: '请选择关联表',
              type: 'warning'
            })
            return
          }
        }
        this.loading = true
        saveDefineColumn({
          columnData: JSON.stringify(this.columnForm.form),
          sceneId: this.sceneId,
          defineSceneId: this.defineSceneId,
          sceneType: this.sceneType
        }).then(res => {
          this.loading = false
          if (res.status) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getColumnData()
            this.columnForm.showPop = false
          }
        })
      },
      //重置自定义字段
      resetColumnForm() {
        resetDefineColumn({
          Id: this.columnForm.form.defineId,
        }).then(res => {
          if (res.status) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getColumnData()
            this.columnForm.showPop = false
          }
        })
      },
      handleFormSave(done) {
        this.$refs.refCommForm.submitForm()
      },
      getTableHeight() {
        var winHeight = window.innerHeight - 100
        if (this.tableType == 1) {
          if (this.reqData.tableData.length == 0) {
            // return '200px'
          }
          var rowHeight = this.rowStyle.height.replace('px', '')
          var tableHeight = this.reqData.tableData.length * Number(rowHeight) + 40
          if (winHeight > tableHeight) {
            // return (tableHeight + 8) + 'px'
            // return 'auto'
          }
          // return '100%'
        }
        return '200px'
        // return (winHeight - 40) + 'px'
      },
      // 打印
      doPrint() {
        this.doCloseMenu()
        if (this.selectionData.length === 0) {
          return
        }
        localStorage.setItem('print_data_' + this.sceneId, JSON.stringify(this.selectionData))
        this.$$parent(this, "doPrint", JSON.stringify(this.selectionIds))
      },
      //流程管理
      doEditFlow() {
        this.$$parent(this, "doEditFlow")
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .my-toolbar-title {
    padding-left: 10px;
    font-size: 14px;
    margin: 5px 0;
  }

  .add-search-btn {
    margin: 15px 0 15px 10px;
    display: inline-block;
  }

  .my-tool-bar-menu.el-menu--collapse.el-menu {
    width: 100%;
    border-right: 0px;
  }

  .my-tool-bar-menu.el-menu--collapse .el-menu .el-menu-item {
    padding: 0 !important;
    line-height: 40px;
    height: 40px;
    font-size: 14px;
  }

  .my-tool-bar-menu.el-menu--collapse.el-menu .el-submenu__title {
    padding: 0 0 0 5px !important;
  }

  .el-menu--vertical .el-menu-item {
    line-height: 40px;
    height: 40px;
    font-size: 14px;
  }

  .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
    margin-left: 0;
  }

  .el-menu.el-menu--popup {
    padding-left: 10px;
  }

  .my-mask-bg {
    background: rgba(0, 0, 0, 0);
    z-index: 1999;
    position: absolute;
    top: 0px;
    bottom: 0;
    width: 100%;
  }

  .my-define-focus-title {
    z-index: 2000;
    position: relative;
  }

  .my-mask-focus-bg {
    top: 0px;
  }

  .my-define-dropdown-menu0 .el-select-dropdown__item {
    padding-left: 5px;
  }

  .el-menu--horizontal.my-sub-menu-zd {
    border: solid 0.5px #dee0e3;
    background: #fff;
    border-radius: 6px;
  }

  .el-menu--horizontal.my-sub-menu {
    border: solid 0.5px #dee0e3;
    background: #fff;
    border-radius: 6px;
  }

  .el-menu--horizontal.my-sub-menu-2 {
    border: solid 0.5px #dee0e3;
    background: #fff;
    border-radius: 6px;
  }

  .el-menu {
    .svg-icon {
      width: 15px;
      height: 13px;
      vertical-align: -1px;
      fill: #757575;
    }

    .icon-edit.svg-icon {
      width: 10px;
      height: 10px;
      margin-left: 5px;
      vertical-align: 1px;
    }
  }

  .my-tableview-menu.el-submenu {
    margin-right: 20px;
  }

  .my-tableview-menu.el-submenu .svg-icon {
    vertical-align: -2px;
  }

  .el-dropdown-menu__item.focus-item {
    padding: 0 10px;
  }

  .define-plus-icon.el-link {
    font-size: 15px;
  }

  .column-dropdown-menu {
    .svg-icon {
      width: 14px;
      height: 14px;
    }

    .el-dropdown-menu__item {
      padding: 0px;
    }

    .el-dropdown-menu__item.column-dropdown-item-edit {
      padding: 0 15px 0 10px;
    }

    .column-dropdown-remove-div {
      padding: 0 15px 0 10px;
    }
  }

  .my-toolbar-desc {
    font-size: 12px;
    color: #888;
    padding: 10px;
  }

  .my-color-picker.el-color-picker--mini {
    vertical-align: -2px;
  }

  .checkbox-style .el-form-item.el-form-item--mini {
    margin-bottom: 0px;
  }

  .my-color-picker.el-color-picker--mini .el-color-picker__trigger {
    width: 18px;
    height: 18px;
    padding: 0px;
  }

  .el-form-item--mini .el-form-item__label {
    padding: 0px;
  }
</style>
